﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { WMS } from '../../src/og/layer/WMS.js';
        import { Vector } from '../../src/og/layer/Vector.js';
        import { GeoImage } from '../../src/og/layer/GeoImage.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { LayerSwitcher } from '../../src/og/control/LayerSwitcher.js';

        var osm = new XYZ("OpenStreetMap", {
        fading: true,
        isBaseLayer: true,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var sat1 = new XYZ("MapQuest Satellite", {
        fading: true,
        shininess: 20,
        specular: [0.00048, 0.00037, 0.00035],
        diffuse: [0.88, 0.85, 0.8],
        ambient: [0.15, 0.1, 0.23],
        isBaseLayer: true,
        url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: false,
        attribution: `@2014 MapQuest - Portions @2014 "Map data @
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });

        var sat2 = new XYZ("MapQuest Satellite With Labels", {
        fading: true,
        shininess: 20,
        specular: [0.00048, 0.00037, 0.00035],
        diffuse: [0.88, 0.85, 0.8],
        ambient: [0.15, 0.1, 0.23],
        isBaseLayer: true,
        url: "https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: false,
        attribution: `@2014 MapQuest - Portions @2014 "Map data @
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });

        var dark = new XYZ("MapQuest Dark", {
        fading: true,
        shininess: 20,
        specular: [0.00048, 0.00037, 0.00035],
        diffuse: [0.88, 0.85, 0.8],
        ambient: [0.15, 0.1, 0.23],
        isBaseLayer: true,
        url: "https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: false,
        attribution: `@2014 MapQuest - Portions @2014 "Map data @
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });

        var light = new XYZ("MapQuest Light", {
        fading: true,
        shininess: 20,
        specular: [0.00048, 0.00037, 0.00035],
        diffuse: [0.88, 0.85, 0.8],
        ambient: [0.15, 0.1, 0.23],
        isBaseLayer: true,
        url: "https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: false,
        attribution: `@2014 MapQuest - Portions @2014 "Map data @
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });

        var states = new WMS("USA Population", {
        fading: true,
        extent: [[-128, 24], [-66, 49]],
        visibility: false,
        isBaseLayer: false,
        url: "//openglobus.org/geoserver/",
        layers: "topp:states",
        opacity: 0.4,
        attribution: 'Hi!',
        transparentColor: [1.0, 1.0, 1.0]
        });

        var colorado = new GeoImage("Colorado Lagoon from ISS", {
        fading: true,
        src: "colorado-lagoon.jpg",
        corners: [[-67.53063210679933, -22.148203215209232], [-67.76790919786042, -22.472194951833597], [-67.98127275782282, -22.331289122713546], [-67.74288424259892, -21.991520350954644]],
        visibility: false,
        isBaseLayer: false,
        attribution: `
        <a href="https://vk.com/olegmks">Oleg Artemjev</a>`,
        opacity: 1
        });

        var vector = new Vector("Vector Green Area", {
        fading: true,
        'visibility': false,
        'isBaseLayer': false,
        'diffuse': [0, 0, 0],
        'ambient': [1, 1, 1],
        'entities': [{
        'geometry': {
        'type': "Polygon",
        'coordinates': [[[10, 20], [10, 30], [20, 30], [20, 20]]],
        'style': {
        'lineWidth': 8,
        'fillColor': "rgba(0, 190, 0, 0.6)",
        'lineColor': "green"
        }
        }
        }, {
        'lonlat': [14, 25],
        'label': {
        'text': "Green Area",
        'outline': 0.5,
        'outlineColor': "rgba(0,0,0,0.55)",
        'size': 43,
        'color': "#00ff00",
        'face': "verdana",
        'align': "center"
        }
        },{
        'geometry': {
        'type': "Polygon",
        'coordinates': [[[0, 17], [6, 36], [12, 17]]],
        'style': {
        'lineWidth': 8,
        'fillColor': "rgba(190, 0, 0, 0.6)",
        'lineColor': "red"
        }
        }
        }, {
        'lonlat': [5, 23],
        'label': {
        'text': "Red Area",
        'outline': 0.2,
        'outlineColor': "rgba(0,0,0,0.45)",
        'size': 23,
        'color': "#ff0000",
        'face': "verdana",
        'align': "center"
        }
        }]
        });

        var globus = new Globe({
        "target": "globus",
        "name": "Earth",
        "terrain": new GlobusTerrain("OpenGlobus"),
        "layers": [osm, sat1, sat2, light, dark, states, colorado, vector]
        });

        globus.planet.addControl(new LayerSwitcher());

        window.planet = globus.planet;

    </script>
</body>

</html>